import React, { useEffect, useState } from 'react';
import { Image, View } from '@tarojs/components';
import CommentListItem from '@/components/Comment/List/item';
import { getCommentListServer } from '@/services/comment';
import Loading from "@/components/Loading/index";
import picEmpty from './empty.jpg';

import './index.scss';


//评价列表
const CommentList = React.forwardRef(
  ({ type = 0, topicId = 0, appId = 'thjs_takeout_org' }, ref) => {
    const [state, updateState] = useState({
      reload: false,
      page: 1,
      loading: false,
      finished: false,
      data: [],
    });

    const setState = (data) => {
      updateState({ ...state, ...data });
    };

    const [data, setData] = useState({});

    //加载数据
    const load = () => {
      if (!state.reload || state.loading || state.finished || !topicId) return;
      setState({
        reload: false,
        loading: true,
      });
      const oriType = type;
      const params = {
        ...(type ? { type } : {}),
        topicId,
        appId,
        page: state.page,
        pageSize: 20,
      };
      getCommentListServer(params).then((res) => {
        if (oriType == type) {
          let newState = {
            reload: false,
            loading: false,
            page: state.page + 1,
          };
          newState['data'] = state.data;
          newState['finished'] = state.finished;
          if (res.code == 1 && res.content.commentList.length) {
            newState['data'] = state.data.concat(res.content.commentList);
          } else {
            newState['finished'] = true;
          }
          data[`${topicId}_${type}`] = {
            page: newState.page,
            data: newState.data,
            finished: newState.finished,
          };
          setData(data);
          setState({
            ...newState,
          });
        }
      });
    };

    //初始化
    useEffect(() => {
      load();
    }, [state]);

    //重置查询数据
    useEffect(() => {
      if (topicId) {
        if (data[`${topicId}_${type}`]) {
          setState(data[`${topicId}_${type}`]);
        } else {
          setState({
            reload: true,
            page: 1,
            loading: false,
            finished: false,
            data: [],
          });
        }
      }
    }, [topicId, type]);

    React.useImperativeHandle(ref, () => ({
      nextPage() {
        setState({
          reload: true,
        });
      },
    }));

    if (!state.data.length && !state.loading) {
      return (
        <View className="commentEmpty">
          <Image src={picEmpty} className="pic" />
          <View className="msg">暂无评价</View>
        </View>
      );
    } else {
      return (
        <View className="commentListBox">
          {!!state.data.length && (
            <View className="commentListContent">
              {state.data.map((item, idx) => (
                <CommentListItem key={idx} data={item} />
              ))}
            </View>
          )}
          <Loading loading={state.loading} finished={state.finished}></Loading>
        </View>
      );
    }
  },
);

export default CommentList;
